<?xml version="1.0" encoding="UTF-8" ?>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>/mobile/bud/budMyProfile.jsp</title>

	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> 

	<LINK href="${cPath }/css/bud.css"  rel="stylesheet"  type="text/css"/>
	<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
	<SCRIPT type="text/javascript">
		$(document).on("mobileinit", function(){
			$.mobile.ajaxEnabled = false;
		});
		
		function imageChange() {
			$("#mem_image").click();
			document.budMyProfileForm.text1.value = $("#mem_image").val();

// 			  var tmp = new Image;
// 			  tmp.src = $("#file").val();
// 			  document.budMyProfileForm.image.src = tmp.src;
// 			  document.budMyProfileForm.image.style.display = "block";
// 			  document.budMyProfileForm.image.width = 130;
// 			  document.budMyProfileForm.image.height = 130;
// 			  alert("123");

		}
		
		function deleteComment(cm_no){
			$.ajax({ 
				url : "${cPath }/bud/budDelComment.mo",
				data : "cm_no="+cm_no,
				dataType : "json", 
				success : successFun,
				error : function(xhr){
					 alert("상태코드 : " + xhr.status +" 에러발생 ~ 잠시뒤 다시 시도해 주세요");
				}
			});	
		}
		
		function successFun(result){
			location.reload();
			$("#msg2").trigger("click");
		}
		

	</SCRIPT>
	<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div id="budMyProfile" data-role="page" data-theme="b">
	<div data-role="header" data-position="fixed" data-theme="a">
		<div style="left:5px; top:5px; z-index:10001;position:fixed;" >
			<img src="${cPath }/css/webbud.png" height="30px" />
		</div>
		<a href="${cPath }/logout.mo" id="back" data-icon="custom" class="ui-btn-right">로그아웃</a>
		<h1>내 프로필</h1>
		<div id="topNavbarId" data-role="navbar" data-iconpos="top" >
			<ul>
				<li><a href="${cPath }/scan/scanMap.mo" id="scan" data-icon="custom" >Scan</a></li>
				<li><a href="${cPath }/bud/budList.mo" id="bud" class="ui-btn-active" data-icon="custom" >Bud</a></li>
				<li><a href="${cPath }/chat/chatList.mo" id="chat" data-icon="custom">Chat</a></li>
				<li><a href="${cPath }/settings/setMain.mo" id="set" data-icon="custom">Settings</a></li>
			</ul>
		</div>
		
	</div>

	<div data-role="content" style="padding-top:0px;">
	
		<FORM id="budMyProfileForm" name="budMyProfileForm" action="${cPath }/bud/budMyProfileEdit.mo" method="post" enctype="multipart/form-data">
		<div class="ui-grid-a">
			<INPUT type="hidden" name="mem_no" value="${sessionScope.memberSession.mem_no }" />
			<input type="text" name="text1" id="text1" style="font-size:10px; margin-bottom : 0px;" readonly="readonly" placeholder="사진을 클릭하면 이미지를 변경할 수 있습니다"/>
			<input type="file" id="mem_image" name="mem_image" accept="image/jpeg" style="top:1px; z-index:1; position:fixed;"></input> <br/>
			
			<div id="" class="ui-block-a" style="padding-right: 5%; width:40%">
				<c:if test="${!empty sessionScope.memberSession.mem_photoStr }">
					<a href="javascript:imageChange();"><img id="image" name="image" src="data:image/jpeg;base64, ${sessionScope.memberSession.mem_photoStr }" 
						width=100% style="border-style:solid; border-color:Gray;" /></a>
				</c:if>
				<c:if test="${empty sessionScope.memberSession.mem_photoStr }"> 
					<a href="javascript:imageChange();"><img id="image" name="image" src="${cPath }/css/images/budIcon.png" 
						width=100% style="border-style:solid; border-color:Gray;" /></a>
				</c:if>
			</div>
			<div class="ui-block-b">
				<label for="basic" style="Color:#ef403d;"> Nickname </label>
				<input type="text" name="mem_name" id="name" value="${sessionScope.memberSession.mem_name }"  />
				<label for="basic" style="Color:#ef403d;"> Gender </label><br />
				<label for="basic" style="font-size: 20px; font-weight: bold;">&nbsp;&nbsp;
					<c:if test="${sessionScope.memberSession.mem_gender == 'f' }">Female</c:if>
					<c:if test="${sessionScope.memberSession.mem_gender == 'm' }">Male</c:if>
				</label>
			</div>	   
		</div>
		<label for="basic" style="Color:#ef403d;"> Message </label>
		<input type="text" name="mem_message" id="message" value="${sessionScope.memberSession.mem_message }"  />
		</FORM>
		
		<ul data-role="listview" data-inset="true" data-split-icon="custom" id="delete" data-split-theme="d">
			<li data-role="list-divider">
				<label for="basic"> Comment </label>
				<LABEL style="float:right;">삭제</LABEL>
			</li>
			<c:if test="${empty commentMemberList }"><li>작성된 코멘트가 없습니다</li></c:if>
			<c:forEach var="commentMember" items="${commentMemberList }" varStatus="status">
				<li><a href="#">
				<c:if test="${!empty commentMember.mem_photoStr }">
					<img class="ui-li-icon" src="data:image/jpeg;base64, ${commentMember.mem_photoStr }" />
				</c:if>
				<c:if test="${empty commentMember.mem_photoStr }">
					<img class="ui-li-icon" src="${cPath }/css/webbud.png" />
				</c:if>		
				<p><LABEL style="float:left;">${commentMember.mem_name }</LABEL>
				<LABEL style="float:right;">${commentMember.cm_dateStr }</LABEL></p>
				<h3 style="font-size: 13px; color: gray;">${commentMember.cm_comment }</h3></a>
				<a href="#popupDialog${status.index }" data-rel="popup" data-position-to="window" data-transition="pop">삭제</a>
				</li>
	<div data-role="popup" id="popupDialog${status.index }" data-overlay-theme="b"  style="max-width:300px;" class="ui-corner-all">
		<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
			<h3 class="ui-title">정말로 삭제하시겠습니까?</h3>
			<a href="javascript:deleteComment('${commentMember.cm_no }')" data-role="button" data-inline="true" data-theme="a">삭제</a>    
			<a href="#" data-role="button" data-inline="true" data-rel="back" data-transition="flow" data-theme="b">취소</a>
		</div>
	</div>
				 
			</c:forEach>
		</ul>

	</div>

	<div data-role="footer" data-position="fixed" data-theme="a">		
		<div data-role="navbar">
			<ul>
				<li><a href="#popupDialog" data-rel="popup" data-position-to="window" data-transition="pop">수정</a></li>
				<li><a href="${cPath }/bud/budList.mo" >닫기</a></li>
<!-- 				<li><a href="javascript:history.back()" >닫기</a></li> -->
			</ul>
		</div>
	</div>
	
	<div data-role="popup" id="popupDialog" data-overlay-theme="b" style="max-width:250px;" class="ui-corner-all">
		<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
			<h3 class="ui-title">정말로 수정하시겠습니까?</h3>
			<a href="#" onclick='javascript:$("#budMyProfileForm").trigger("submit")' data-role="button" data-inline="true" data-theme="a">수정</a>    
			<a href="#" data-role="button" data-inline="true" data-rel="back" data-theme="b">취소</a>  
		</div>
	</div>

	<a href="#popupMsg" data-rel="popup" id="msg" hidden="true" data-position-to="window" data-transition="pop"></a>
	<div data-role="popup" id="popupMsg" data-overlay-theme="a" style="max-width:400px;" class="ui-corner-all">
		<div data-role="content" data-theme="d" class="ui-corner-bottom ui-content">
			<h3 class="ui-title">${msg }</h3>
		</div>
	</div>
	<c:if test="${!empty msg }">
		<script>
			$(function(){
				$("#msg").trigger("click");
			});
		</script>
	</c:if>
	
</div><!-- /page -->
</body>
</html>